<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS - 背景</title>
    <style>
      * {
        /* margin: 0; */
        box-sizing: border-box;
        /* padding: 0; */
      }
      .bg-item {
        display: flex;

        align-items: center;
      }
      .box {
        display: inline-block;

        margin-bottom: 12px;
        width: 100px;
        height: 100px;
      }
      .bg-black {
        background-color: black;
      }
      .bg-linear-black {
        background-image: linear-gradient(to right, #ccc, #000);
      }
      .bg-radial-black {
        background-image: radial-gradient(#ccc, #000);
      }
      .bg-conic-black {
        background-image: conic-gradient(#ccc, #000);
      }
      .bg-multi-img {
        background: repeating-linear-gradient(
            90deg,
            red 0,
            red 1px,
            transparent 1px,
            transparent 10px
          ),
          repeating-linear-gradient(
            red 0,
            red 1px,
            transparent 1px,
            transparent 10px
          ),
          #ccc;
        background-position: 5px 0, 0 5px; /* 第一层偏移 5px，第二层偏移 5px */
      }
      .bg-origin {
        border: 10px solid rgba(255, 0, 0, 0.1);
        padding: 40px;

        /* background-color: aquamarine; */

        background-image: url(./NATOURS/img/hero.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
      .bg-origin-border {
        background-origin: border-box;
      }
      .bg-origin-padding {
        background-origin: padding-box;
      }
      .bg-origin-content {
        background-origin: content-box;
      }
      .bg-clip {
        border: 10px solid rgba(255, 0, 0, 0.1);
        padding: 40px;

        background-image: url(./NATOURS/img/nat-10.jpg);
        background-repeat: no-repeat;
        background-position: center;
      }
      .bg-clip-border {
        background-clip: border-box;
      }
      .bg-clip-padding {
        background-clip: padding-box;
      }
      .bg-clip-content {
        background-clip: content-box;
      }
      .bg-clip-text {
        width: 450px;

        font-size: 30px;
        font-weight: 900;

        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
      }

      span {
        margin-left: 12px;
      }

      .search-container {
        display: flex;

        position: relative;

        width: 400px;

        column-gap: 12px;
        align-items: center;
      }

      .search-container ul {
        display: flex;
        overflow-x: auto;

        padding: 0;

        flex: 1;
        align-items: center;
        column-gap: 4px;
      }
      .search-container ul ::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        width: 100px;

        background: linear-gradient(to right, transparent, #fff);

        content: "";
      }
      /* 完全隐藏滚动条 */
      ::-webkit-scrollbar {
        display: none;
      }
      li {
        list-style: none;

        border: 1px solid #000;
        border-radius: 4px;
        padding: 4px;
      }
      .search-title {
        font-weight: bold;
      }
      .search-del {
        position: relative;

        border-radius: 4px;
        padding: 4px;

        font-size: 12px;

        background-color: #ccc;
      }

      .triangle {
        width: 100px;
        height: 100px;

        background: linear-gradient(
          45deg,
          #f00 0%,
          #f00 50%,
          transparent 50%,
          transparent 100%
        );
      }

      .internal {
        margin: 12px 0;
        width: 100px;
        height: 80px;

        background-image: linear-gradient(135deg, transparent 15px, deeppink 0),
          linear-gradient(-135deg, transparent 15px, deeppink 0),
          linear-gradient(-45deg, transparent 15px, deeppink 0),
          linear-gradient(45deg, transparent 15px, deeppink 0);
        background-repeat: no-repeat;
        background-position: top left, top right, bottom right, bottom left;
        background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
      }

      .progress {
        width: 200px;
        height: 20px;

        background-image: repeating-linear-gradient(
          45deg,
          deeppink,
          deeppink 11px,
          transparent 11px,
          transparent 20px
        );
      }
      .circle {
        margin: 12px 0;
        width: 100px;
        height: 100px;

        background: radial-gradient(
          #9c27b0 0%,
          #9c27b0 47%,
          #ffeb3b 47%,
          #ffeb3b 100%
        );
      }

      .coupon {
        position: relative;

        box-sizing: border-box;
        border-radius: 5px;
        padding-left: 60px;
        width: 400px;
        height: 160px;

        font-size: 100px;
        font-weight: bold;
        line-height: 160px;

        color: #fff;
        background: linear-gradient(to right, #945700 0%, #f49714 100%);

        text-shadow: -2px -2px 2px #333;

        filter: drop-shadow(-7px 4px 3px #333);
      }
      .coupon::before,
      .coupon::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        content: "";
      }
      .coupon::before {
        width: 10px;

        background-image: radial-gradient(
          circle at -5px 10px,
          transparent 12px,
          #fff 13px,
          #fff 0px
        );
        background-position: 0 15px;
        background-size: 20px 20px;
      }
      .coupon::after {
        width: 15px;

        background-image: radial-gradient(
          circle at 15px 10px,
          #fff 12px,
          transparent 13px,
          transparent 0px
        );
        background-position: 0 15px;
        background-size: 20px 40px;
      }

      .text-flow {
        margin: 12px 0;

        font-size: 16px;

        background-image: radial-gradient(
            circle at 10px -7px,
            transparent 8px,
            currentColor 8px,
            currentColor 9px,
            transparent 9px
          ),
          radial-gradient(
            circle at 10px 27px,
            transparent 8px,
            currentColor 8px,
            currentColor 9px,
            transparent 9px
          );
        background-repeat: repeat-x;
        background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
        background-size: 20px 20px;
      }

      .bg-position {
        margin-bottom: 12px;
        width: 200px;
        height: 100px;

        background: linear-gradient(
          to right,
          #ffc700 0%,
          #e91e1e 50%,
          #6f27b0 100%
        );
        background-position: 0 0;
        background-size: 200% 100%;

        animation: bgPosition infinite 2s linear alternate;
      }
      @keyframes bgPosition {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 100% 0;
        }
      }

      .bg-size {
        margin-bottom: 12px;
        width: 200px;
        height: 100px;

        background: linear-gradient(
          to right,
          #ffc700 0%,
          #ff9100 33%,
          #e91e1e 66%,
          #6f27b0 100%
        );
        background-position: 100% 0;

        animation: bgSize infinite 5s ease-in-out alternate;
      }
      @keyframes bgSize {
        0% {
          background-size: 300% 100%;
        }
        100% {
          background-size: 100% 100%;
        }
      }

      .bg-transform {
        overflow: hidden;

        position: relative;

        margin-bottom: 12px;
        width: 200px;
        height: 100px;
      }
      .bg-transform::before {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: 0;
        left: -100%;

        background-image: linear-gradient(
          to right,
          #ff9100 33%,
          #e91e1e 66%,
          #6f27b0 100%
        );
        background-size: 100% 100%;

        animation: bgTransform infinite 3s linear alternate;

        content: "";
      }
      @keyframes bgTransform {
        0% {
          transform: translateX(-30%);
        }
        25% {
          transform: translateX(-15%);
        }
        50% {
          transform: translateX(0%);
        }
        75% {
          transform: translateX(15%);
        }
        100% {
          transform: translateX(30%);
        }
      }

      .bg-hue {
        margin-bottom: 12px;
        width: 200px;
        height: 100px;

        background-image: linear-gradient(to right, #ff9100, #6f27b0);
        background-size: 100% 100%;

        animation: bgHue infinite 3s linear alternate;
      }
      @keyframes bgHue {
        0% {
          filter: hue-rotate(0);
        }
        100% {
          filter: hue-rotate(360deg);
        }
      }

      @property --colorA {
        syntax: "<color>";
        inherits: false;
        initial-value: fuchsia;
      }
      @property --colorB {
        syntax: "<color>";
        inherits: false;
        initial-value: #f79188;
      }
      @property --colorC {
        syntax: "<color>";
        inherits: false;
        initial-value: red;
      }
      .bg-property {
        margin-bottom: 12px;
        width: 200px;
        height: 100px;

        background-image: linear-gradient(
          to right,
          var(--colorA),
          var(--colorB),
          var(--colorC)
        );
        background-size: 100% 100%;

        animation: bgProperty infinite 3s linear alternate;
      }

      @keyframes bgProperty {
        0% {
          --colorA: red;
          --colorC: #a93ee0;
          --colorF: fuchsia;
        }
        25% {
          --colorA: #ff3c41;
          --colorC: #e228a0;
          --colorF: #2e4c96;
        }
        50% {
          --colorA: orange;
          --colorC: green;
          --colorF: teal;
        }
        75% {
          --colorA: #ae63e4;
          --colorC: #0ebeff;
          --colorF: #efc371;
        }
      }

      .attachment-scroll {
        overflow-y: auto;

        height: 400px;

        background-image: url("./NATOURS/img/nat-3-large.jpg");

        /* background-repeat: no-repeat; */
        background-attachment: local;
        background-size: cover;
      }
      .attachment-scroll p {
        font-size: 30px;
        font-weight: bold;
        text-align: center;

        color: #000;
      }
    </style>
  </head>
  <body>
    <!-- 纯色背景 -->
    <div class="bg-item">
      <div class="box bg-black"></div>
      <span>纯色背景</span>
    </div>
    <!-- 线性渐变 -->
    <div class="bg-item">
      <div class="box bg-linear-black"></div>
      <span>线性渐变</span>
    </div>
    <!-- 径向渐变 -->
    <div class="bg-item">
      <div class="box bg-radial-black"></div>
      <span>径向渐变</span>
    </div>
    <!-- 角向渐变 -->
    <div class="bg-item">
      <div class="box bg-conic-black"></div>
      <span>角向渐变</span>
    </div>
    <!-- 多背景图像 -->
    <div class="bg-item">
      <div class="box bg-multi-img"></div>
      <span>多背景图像</span>
    </div>

    <!-- background-origin -->
    <div class="bg-item">
      <div class="box bg-origin bg-origin-border"></div>
      <span> background-origin border-box效果示例</span>
    </div>
    <div class="bg-item">
      <div class="box bg-origin bg-origin-padding"></div>
      <span> background-origin padding-box效果示例</span>
    </div>
    <div class="bg-item">
      <div class="box bg-origin bg-origin-content"></div>
      <span> background-origin content-box效果示例</span>
    </div>

    <!-- background-clip -->
    <div class="bg-item">
      <div class="box bg-clip bg-clip-border"></div>
      <span>background-clip border-box效果示例</span>
    </div>
    <div class="bg-item">
      <div class="box bg-clip bg-clip-padding"></div>
      <span>background-clip padding-box效果示例</span>
    </div>
    <div class="bg-item">
      <div class="box bg-clip bg-clip-content"></div>
      <span>background-clip content-box效果示例</span>
    </div>
    <div class="bg-item">
      <div class="box bg-clip bg-clip-text">background-clip text效果示例</div>
    </div>

    <div class="search-container">
      <div class="search-title">搜索历史</div>
      <ul>
        <li>Button</li>
        <li>Button</li>
        <li>Button</li>
        <li>Button</li>
        <li>Button</li>
        <li>Button</li>
      </ul>
      <div class="search-del">删除</div>
    </div>

    <div class="triangle"></div>

    <div class="internal"></div>

    <div class="progress"></div>

    <div class="circle"></div>

    <div class="coupon">50</div>

    <div class="text-flow">波浪线滚动哈哈哈</div>

    <div class="bg-position"></div>
    <div class="bg-size"></div>

    <div class="bg-transform"></div>
    <div class="bg-hue"></div>
    <div class="bg-property"></div>

    <div class="attachment-scroll">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
      <p>11</p>
      <p>12</p>
    </div>
  </body>
</html>
